4
4
.
.
1
1
.
.
2
2
I
I
m
m
a
a
g
g
e
e
I
I
n
n
f
f
o
o
[
[
R
R
]
]
Image View is used to display an Image from the Assets. (so first you need to Import Image into Assets)
When referencing Image
● don't include file extension (for example use leaves instead of leaves.jpg)
● you can't use Asset's directories (so every image needs to have unique name)
You can scale an image to arbitrary dimensions, while maintaining the original aspect ratio by wrapping the image in
another element. Like in .frame as shown by below example.
Syntax
Image("leaves")
Image(systemName: "star.circle.fill").font(.system(size: 200)).foregroundColor(.green)
View Modifiers
MODIFIERS
DESCRIPTION
.resizable()
Works together with .aspectRatio which specifies how it can change size
Without this it keeps original size
● If it is bigger then Parent it will be clipped.
● If it is smaller then Parent it will only take as much space as it needs.
.aspectRatio(contentMode: .fit)
.aspectRatio(contentMode: .fill)
Both fill and fit preserve aspect ratio by stretching equally in both dimensions
● Fit will stop stretching when it hits borders in one direction
● Fill will stop stretching when the whole view is covered
.clipShape(Circle())
Image is clipped to a custom frame. Fills the frame preserving aspect ration.
E
E
x
x
a
a
m
m
p
p
l
l
e
e
ContentView.swift
struct ContentView: View {
var body: some View {
Image("Table")
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: 300, height: 300).border(Color.blue, width: 2)
.clipped()
}
}
Output
I
I
m
m
a
a
g
g
e
e
[
[
R
R
]
]
Image is by default inserted in full size. Since our Image is 960 × 640 and root View is only 800 x 400 Image will extend
beyond the Root View. In the Preview we can actually see how much bigger the image is as indicated by the blue square.
To better observe this and subsequent behavior we will apply .frame modifier to the Image which puts Image inside a
Frame View which becomes its Parent. Frame is highlighted with blue border. We see that Image was placed at the center
of its Parent Frame and that it expands in full size in every direction. We have added Frame to be able to see parts of the
Image that will go beyond the Parent in the subsequent examples. When Image stretches beyond the Root View we can't
see those parts.
If we add .resizable to the Image it will completely fill its Parent (Frame View).
It will stretch in the vertical direction because it is longer then it's tall.
To prevent stretching we add .aspectRatio(contentMode: .fit) which resizes Image until it hits one of Parent's borders.
Since our image is longer in width it will stop stretching when it hits horizontal borders of the Parent Frame View.
We now have empty spaces above and below the Image.
If we want our Image to completely cover Parent Frame View we can use .aspectRatio(contentMode: .fill).
This way it will continue increasing until both sets of Parent borders are hit (horizontal and vertical).
Now the Image has gone outside the Parent's borders in the horizontal direction.
To remove these parts we can apply .clipped modifier to Frame View.
We have to apply it AFTER the .background modifier or there will be nothing to clip.
.background modifier is applied to Frame but it returns back the Frame itself.
This is why if we now apply .clipped modifier it will be applied to the Frame View.
Example
struct ContentView: View {
var body: some View {
Image("Table")
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: 300, height:300).border(Color.blue, width: 2)
.clipped()
}
}
Image("Table") .frame(width: 300, height:300).border(Color.blue, width: 2)
.resizable() .aspectRatio(contentMode: .fit)
.aspectRatio(contentMode: .fill) .clipped()
